<template>
	<div class="u-general-color">
		<div>
			<section>
				<div>
					<div id="imgbox">
						<div>
							<u-swiper :list="form.goodsImages.split(',')" height="375" border-radius="0" @click="showOriginalImage"></u-swiper>
						</div>
					</div>
					
					<div class="n-price-1">
						<div class="n-price__left price-area u-pl-15">
							<div class="u-fz-26 u-font-bold discount-price">
								&yen;{{form.samplePrice?form.samplePrice:''}}</div>
							<div class="u-pl-5 u-pt-5 discount-tag">
								<u-tag text="样品推广价" mode="dark" size="mini" bgColor="#fc545d" borderColor="#fc545d"></u-tag>
							</div>
							<span class="line-through u-pl-10">&yen;{{goods.goodsPrice?goods.goodsPrice:'0'}}</span>
						</div>
						<div class="countdown-area">
							<div class="u-fz-17 u-text-center u-font-bold u-pl-15" style="line-height: 35rpx;">{{endTimeContent}}</div>
							<div class="u-fz-8 u-text-center u-pl-15" v-if="endTimeContent != '活动已结束' && endTimeContent.indexOf('天后结束') == -1">距离活动结束仅剩</div>
						</div>
					</div>
					
					<div class="u-pl-15 u-flex" v-if="couponTag">
						<u-tag :text="'评价获'+couponTag+'元优惠券'" mode="plain" size="mini" color="#e66142" bg-color="#faede4" border-color="#faede4" />
					</div>

					<div class="u-title u-fz-18 u-pb-10 commodity-name">
						<h4 class="tit f-els-2">
							<span class="goods-title-tag u-pr-5" v-if="form.label">{{form.label}}</span>
							<span class="middile">{{form.subject?form.subject:''}}</span>
						</h4>
					</div>

				</div>
			</section>

		</div>

		<p class="v-sperate"></p>
		<section class="j-block">
			<div class="deliver-goods" @click="viewFreight">
				<div class="left">
					<span class="color-gray">
						发货
					</span>
					<span class="u-pl-10" v-if="goods.originAddr">
						{{goods.originAddr.replaceAll('-',' ')?goods.originAddr.replaceAll('-',' '):''}} | 包邮
					</span>
					<span v-else>
						包邮
					</span>
				</div>

				<div class="color-gray u-flex">
					<span class="u-pr-5">
						偏远地区运费
					</span>
					<u-icon name="arrow-right" color="#9f9d9e" size="13"></u-icon>
				</div>
			</div>
			
			<div class="specs-goods" v-if="form.specification">
				<div class="left">
					<span class="color-gray">
						规格
					</span>
				</div>
				<div class="right">
					<span>
						{{form.specification?form.specification:''}}
					</span>
				</div>
			</div>
		</section>
		
		<p class="v-sperate"></p>
		<section class="j-block width93">
			<div class="modal-item">
				<div class="u-fz-20 u-font-bold">
					非常重要！请仔细阅读！
				</div>
			</div>
			
			<div v-if="show_rule">
				<div class="rule-title">
					试用要求
				</div>
				<div class="rule-content">
					<u-parse :content="this.escape2Html2(form.requiredContent)"></u-parse>
				</div>
				
				<div class="rule-title">
					评级标准
				</div>
				<div class="rule-content">
					<u-parse :content="this.escape2Html2(form.ratingCriteria)"></u-parse>
				</div>
				
				<div class="rule-title">
					领取规则
				</div>
				<div class="rule-content">
					<u-parse :content="this.escape2Html2(claimRules)"></u-parse>
				</div>
			</div>
		</section>

		<p class="v-sperate"></p>
		<section class="j-block width93" v-if="evaluationResultsList.length > 0">
			<div class="evaluation-show-title">
				<span class="left">测评展示</span>
				<div class="right" @click="viewAllEvaluation">
					<span class="u-pr-5">查看全部</span>
					<u-icon name="arrow-right" color="#9f9d9e" size="13"></u-icon>
				</div>
			</div>
			<div class="pictrues-box">
				<div v-for="(item,index) in evaluationResultsList" :key="index"
					style="padding: 5rpx;position: relative;">
					<u-image width="225rpx" height="225rpx" :src="item.url" v-if="index<3"></u-image>
				</div>
			</div>
		</section>

		<p class="v-sperate"></p>
		<section class="j-block width93">
			<div id="qualityreport"></div>
			<div style="margin: 10rpx 0rpx;">
				<span class="goods-details-title">商品详情</span>
			</div>
			<div class="u-mb-10">
				<u-parse :content="this.escape2Html(goods.detail)"></u-parse>
			</div>
			<div class="modal-item" @click="viewNotice">
				<div>
					购买须知
				</div>
				<div style="font-size: smaller;">
					<u-icon name="arrow-right" color="#9f9d9e" size="13"></u-icon>
				</div>
			</div>
			<div class="modal-item" @click="salesService">
				<div>
					售货服务
				</div>
				<div style="font-size: smaller;">
					<u-icon name="arrow-right" color="#9f9d9e" size="13"></u-icon>
				</div>
			</div>
		</section>

		<div style="height: 220rpx;"></div>

		<article class="m-buybar">
			<!-- 参与者视角 -->
			<div class="btn-wrap">
				<button class="customStyle-btn" @click="CheckData">
					<u-icon name="kefu-ermai" color="#000000" size="25"></u-icon>
					<span class="customStyle-btn-span">客服</span>
				</button>
				
				<div class="have-a-try" @click="CheckData">
					<div>参与品牌合作</div>
				</div>
				
				<div class="u-ml-5 register-to-receive" @click="CheckData" v-if="form.status == '1'">
					<div>报名领取 </div>
					<div class="u-fz-12 pl-5">(剩余{{form.remainQuota?form.remainQuota:0}}个名额)</div>
				</div>
				<div class="u-ml-5 register-to-receive-end" v-else>
					<div>报名领取 </div>
					<div class="u-fz-12 pl-5">(剩余{{form.remainQuota?form.remainQuota:0}}个名额)</div>
				</div>
				
			</div>
		</article>
		<InvitationCode ref="invitationCodeRef" @childEvent="handleChildEvent" />
	</div>
</template>

<script>
	import globalData from "@/globalData";
	export default {
		data() {
			return {
				docUnid: '',
				form: {},
				goods: {},
				userInfo: {},
				isClick: false,
				isCreator: false, // 是否为发起人
				endActivity_show: false,
				evaluationResultsList: [], // 测评成果
				freight_show: false, // 偏远地区运费
				buyNotice_show: false, // 购买须知
				afterSales_show: false, // 玫丽售后服务
				customerService: {}, // 客服信息
				customerService_show: false,
				checkEvaluatorInfo_show: false,
				checkRegisterProvider_show: false,
				inviteStyle: {
					fontSize: '24rpx',
					width: '210rpx',
					padding: '0',
					color: '#000000'
				},
				buynowStyle: {
					backgroundColor: '#e55e97',
					color: '#ffffff',
					width: '380rpx',
					border: '0'
				},
				CollageStyle: {
					fontSize: '24rpx',
					width: '150rpx',
					padding: '0',
					color: '#000000'
				},
				collectSamplesStyle: {
					backgroundColor: '#e55e97',
					color: '#ffffff',
					width: '335rpx',
					border: '0'
				},
				endTimeContent: '',
				show_rule: true,
				claimRules: '领取样品后，需完成产品试用，并按照试用要求提交评价，达到评级标准的平台会发放相应的报酬！如未完成评价，则会限制您继续参与其他样品活动，敬请谅解～',
				iconName: 'arrow-down',
				disclaimers_show: false,//免责声明弹窗控制
				couponTag: ''
			};
		},

		onLoad(options) {
			this.userInfo = uni.getStorageSync('userInfo');
			if (this.isNotNull(options.docUnid)) {
				this.docUnid = options.docUnid;
				this.getActivityDetails(options.docUnid);
			} else {
				this.showMSG('error', '出错啦！')
				setTimeout(() => {
					this.goBack()
				}, 2500)
			}
		},
		
		onShow(){
			if (this.isNotNull(this.docUnid)) {
				this.userInfo = uni.getStorageSync('userInfo');
				this.getActivityDetails(this.docUnid);
			}
		},

		methods: {

			/**
			 * 获取活动详情
			 */
			async getActivityDetails(docUnid) {
				let result = await this.$u.api.unifyMiniRestGet({
					params: {systemid: "meily"},
					url: "/provide/samples/info/" + docUnid,
				});
				if (result.code == 200) {
					this.form = result.data; // 活动详情
					this.getGoodsDetails(this.form.goodsNo); // 获取商品详情
					this.getEvaluation(this.form.goodsNo); // 获取测评成果

					if(!this.isCreator){
						// 发起人等于当前用户，则表示为发起人视角
						if (this.form.initiatorId == this.userInfo.userId) {
							this.isCreator = true;
						}
					}
					if (this.form.status == '0') {
						this.endTimeContent = '活动已结束';
					} else {
						// 倒计时
					this.countdowm(this.form.endTime, '活动已结束');
					}
					
					//初始化优惠券标签
					this.initCouponTag()
					
				} else {
					this.$u.toast(result.msg)
				}
			},

			/**
			 * 获取商品详情
			 */
			async getGoodsDetails(goodsNo) {
				let result = await this.$u.api.unifyMiniRestGet({
					params: {systemid: "meily"},
					url: "/goods/get/" + goodsNo,
				});
				if (result.code == 200) {
					this.goods = result.data; // 商品信息
				}
			},

			/**
			 * 获取测评成果（BPM）
			 */
			async getEvaluation(goodsNo) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/minrest",
					appid: 'meily',
					wf_num: 'R_meily_BL009',
					goodsNo: goodsNo,
					quantity: '3',
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) { // 可以报名
					this.evaluationResultsList = result.data;
				}
			},

			/**
			 * 【重要！样品领取前请仔细阅读】 
			 */
			showRules(){
				if(this.show_rule){
					this.iconName = 'arrow-right'
					this.show_rule = false
				} else {
					this.iconName = 'arrow-down'
					this.show_rule = true
				}
			},
			
			/** 
			 * 初始化优惠券标签
			 */
			initCouponTag() {
				let couponTag_temp = Math.max(this.form.levelACouponAmount,this.form.levelBCouponAmount,this.form.levelCCouponAmount)
				if(couponTag_temp > 0){
					this.couponTag = couponTag_temp
				}
			},
			
			/**
			 * 点击查看原图
			 */
			showOriginalImage(index) {
				let graphicUrlList = this.form.goodsImages.split(',')
				wx.previewImage({
					current: graphicUrlList[index],
					urls: graphicUrlList,
				});
			},

			/**
			* 判断用户是否已登录，如果登录则跳转到指定页面，否则弹出提示并跳转到登录页面
			*/
			CheckData() {
				const userInfo = uni.getStorageSync('userInfo')
				if (!this.isNotNull(userInfo.userId)) {
					this.showMSG('none', '请先登录！')
					setTimeout(() => {
						this.checkLogin()
					}, 1500)
				}else{
					//通过$refs获取子组件的引用，然后调用子组件的方法
					this.$refs.invitationCodeRef.isExistInvitationCode();
				}
			},

			/**
			 * 验证完邀请码后回调方法
			 */
			handleChildEvent() {
				let url = '/pages_private_scene2/provide_samples/sign_up?docUnid=' + this.docUnid
				this.toMiniProgram(url)
			},
		},
	};
</script>

<style scoped>

	.n-price__left {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		align-items: center;
		line-height: 110rpx;
	}

	.n-prdinfo .tit {
		line-height: 32rpx;
		/* padding-top: 10px; */
		margin-bottom: 12rpx;
		width: 100%;
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
	}

	.v-sperate {
		height: 10rpx;
		background: #f7f1f7;
	}

	img {
		vertical-align: middle;
		border: 0;
	}

	.m-buybar {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 200rpx;
		background: #fff;
	}

	.m-buybar .btn-wrap {
		width: 95%;
		margin: 0 auto;
		height: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.m-buybar a {
		display: block;
		height: 50px;
		vertical-align: top;
		font-size: 15px;
		line-height: 50px;
		text-align: center;
	}

	.m-buybar .btn {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	.m-buybar .buynow {
		color: #fff;
		background: #e31436;
	}

	.m-buybar .buynow.btn-large {
		border: none;
		background-color: #d22147;
		color: #fff;
	}

	.m-buybar .buynow.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .buynow.s-fc {
		background: #000;
	}

	.m-buybar .addcart {
		background-color: #ff8587;
		color: #fff;
	}

	.m-buybar .addcart.dis {
		color: #fff;
		background-color: #ccc;
		border: none;
		cursor: default;
	}

	.m-buybar .collect {
		position: relative;
		/* width: 95px; */
		/* width: 140rpx; */
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		/* border-right: 1px solid #ddd; */
		color: #666;
		font-size: 24rpx;
	}

	.m-buybar .collect:after {
		content: "";
		position: absolute;
		width: 20px;
		height: 20px;
		top: 7px;
		left: 17px;
		background-size: 200px;
	}

	.m-buybar .collect-1 {
		background-position: -161px 1px;
	}

	.m-buybar .collect-1:after {
		background-position: -139px -33px;
	}

	.m-buybar .cart {
		position: relative;
		width: 55px;
		/* padding-top: 12px; */
		/* border-top: 1px solid #ddd; */
		color: #666;
		font-size: 12px;
		background-size: 200px;
	}

	.m-buybar .cart .count {
		position: absolute;
		min-width: 16px;
		height: 16px;
		left: 27px;
		top: 2px;
		background-color: #fff;
		color: #e31436;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		padding: 0 4px;
		border: 1px solid #e31436;
	}

	.m-buybar .nogoods {
		position: absolute;
		top: -40px;
		left: 0;
		width: 100%;
		padding-left: 10px;
		background-color: rgba(0, 0, 0, 0.7);
		text-align: left;
		font-size: 16px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .nogoods:after {
		content: "";
		position: absolute;
		width: 70px;
		height: 45px;
		left: 10px;
		top: -35px;
		background-size: 200px;
	}

	.m-buybar .cantdeliver {
		position: absolute;
		text-align: center;
		top: -40px;
		left: 0;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		font-size: 12px;
		line-height: 40px;
		color: #fff;
	}

	.m-buybar .hide {
		display: none;
	}

	.line-through {
		font-size: 32rpx;
		color: #919191;
		padding: 0 0.2rem;
		text-decoration: line-through;
	}

	.price-area {
		color: red;
		display: flex;
	}

	.commodity-name {
		width: 93%;
		margin: 0 auto;
		color: #000000;
	}

	.discount-price {
		/* line-height: 100rpx; */
		font-weight: bold;
		font-size: 48rpx;
	}

	.deliver-goods {
		margin: 30rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}

	.deliver-goods .left {
		width: 480rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.specs-goods {
		margin: 30rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.specs-goods .left {
		width: auto;
	}
	
	.specs-goods .right {
		width: 90%;
		word-break: normal;
		display: block;
		white-space: pre-wrap;
		overflow: hidden;
	}

	.color-gray {
		color: #9f9d9e;
	}

	.width93 {
		width: 93%;
		margin: 0 auto;
	}

	.evaluation-show-title {
		margin: 10rpx 0rpx;
		display: flex;
		justify-content: space-between;
	}

	.evaluation-show-title .left {
		margin: 20rpx 0rpx;
		font-weight: bolder;
		font-size: 40rpx;
	}

	.evaluation-show-title .right {
		height: 100rpx;
		line-height: 100rpx;
		/* font-size: 30rpx; */
		color: #9f9d9e;
	}

	.goods-details-title {
		margin: 20rpx 0;
		font-weight: bolder;
		font-size: 40rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.modal-item {
		/* margin: 40rpx 0rpx; */
		height: 100rpx;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* color: #9f9d9e; */
		border-top: 1rpx solid #eeeded;
	}

	.aui-list-theme-message span.line-through {
		font-size: 0.7rem;
		color: #919191;
		padding: 0 0.2rem;
		text-decoration: line-through;
	}

	.pictrues-box {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 40rpx;
	}

	.customStyle-btn {
		height: 90rpx;
		border: none !important;
		background-color: transparent;
		margin-left: 0;
		margin-right: 15rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
		padding-top: 6rpx !important;
	}

	.customStyle-btn::after {
		border: none;
	}

	.customStyle-btn-span {
		font-size: 20rpx;
		color: #000000;
		/* color: #666; */
		line-height: 45rpx;
	}
	
	.have-a-try {
		font-size: 30rpx;
		width: 290rpx;
		height: 86rpx;
		border: 2rpx solid #9f9d9e;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.have-a-try .price {
		line-height: 36rpx;
		color: #000000;
		font-weight: bold;
	}

	.pl-5 {
		padding-left: 5rpx;
	}
	
	.rule-title {
		height: 100rpx;
		line-height: 100rpx;
		/* width: 90%;
		margin: 0 auto; */
		font-weight: bold;
	}
	
	.rule-content {
		/* width: 90%;
		margin: 0 auto; */
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f4f4f4;
	}
	.n-price-1 {
		height: 100rpx;
		color: #000000;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		align-items: center;
	}
	.countdown-area {
		width: 220rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: right;
		color: #f4e7db;
		/* background-image: linear-gradient(to right, #1e1a17,#4b3e36); */
		background-color: #4b3e36;
		height: 70rpx;
		border-radius: 50rpx 0rpx 0rpx 50rpx;
	}
	.register-to-receive {
		background-color: #eb5468;
		color: #ffffff;
		font-size: 30rpx;
		width: 360rpx;
		height: 86rpx;
		border: 2rpx solid #eb5468;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.register-to-receive-end {
		background-color: #9f9d9e;
		color: #ffffff;
		font-size: 30rpx;
		width: 360rpx;
		height: 86rpx;
		border: 2rpx solid #9f9d9e;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.goods-title-tag {
		color: #ffffff;
		background-color: #40972f;
		border-radius: 6rpx;
		font-size: 26rpx;
		margin-right: 10rpx;
		vertical-align: middle;
		font-weight: 350;
		padding: 3rpx 10rpx;
	}
	.middile {
		vertical-align: middle;
	}

</style>